<template>
  <div class="shopcar_container">
    <div class="car_list">
      <div class="mui-content">
        <div class="mui-card" v-for="(item,i) in carList" :key="item.id">
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              <mt-switch
                v-model="getGoodsSelected[item.id]"
                @change="selectedChange(item.id, getGoodsSelected[item.id])">
              </mt-switch>
              <img v-lazy="item.thumb_path">
              <div class="info">
                <h3 class="title">{{ item.title }}</h3>
                <div class="price_wrapper">
                  <span class="price">￥{{ item.sell_price }}</span>
                  <num-box 
                    :initCount="countAndId.get(item.id)"
                    :goodsId="item.id">
                  </num-box>
                  <a href="#" @click="delGoods(item.id, i)">删除</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner jiesuan">
              <div class="left">
                <p>总计（不含运费）</p>
                <p>
                  已勾选商品<span class="red">{{ countAndAmount.count }}</span>件，
                  总价：<span class="red">￥{{ countAndAmount.amount }}</span>
                </p>
              </div>
              <mt-button type="danger">去结算</mt-button>
            </div>
          </div>
        </div>
      </div>
    </div> 
  </div>
</template>

<script>
import NumBox from '../subcomponents/Shopcar_numbox'
import { mapGetters } from 'vuex'

export default {
  name: 'shopcar',
  components: {
    NumBox
  },
  data() {
    return {
      carList: []
    }
  },
  created() {
    const idsStr = this.$store.getters.getIdStr
    this.$store.dispatch('getShopCarList', idsStr).then(res => {
      if(res.data.code === 200) {
        res.data.list.forEach(item => {
          item.thumb_path = '/static/'+ item.thumb_path
        });
        this.carList = res.data.list
      }
    })
  },
  methods: {
    selectedChange(id, sel) {
      this.$store.commit('updateSelected', {id, sel})
    },
    delGoods(id, index) {
      if(confirm('确定要删除吗')) {
        this.$store.commit('delGoodsInfo', id)
        this.carList.splice(index, 1)
      }
    }
  },
  computed: {
    ...mapGetters([
      "getGoodsSelected", 
      "countAndId", 
      "countAndAmount"
    ])
  }
}
</script>

<style lang="less" scoped>
  .shopcar_container {
    width: 100%;
    background-color: #eee;
    overflow: hidden;
    .car_list {
      .mui-card-content-inner {
        display: flex;
        align-items: center;
        img {
          width: 60px;
          height: 60px;
          margin: 0 10px;
        }
        h3 {
          font-size: 13px;
        }
        .info {
          .price_wrapper {
            display: flex;
            align-items: center;
            .price {
              color: red;
              font-weight: bold;
            }
            .mui-numbox {
              margin: 0 5px;
            }
          }
        }
      }
      .jiesuan {
        justify-content: space-between;
        .red {
          color: red;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }
</style>
